<template>
	<view class="page">
		<view class="nav_bar nav"
			:style="`background: url(${$util.prefix('auth/store_auth_nav_bg.png')}) 0 0 no-repeat;`">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()">
				<view class="nav_tab">
					<u-tabs :list="list" @click="onTab" :scrollable="true" lineColor="#FD2A53" :inactiveStyle="{
							color: '#131313',
							fontWeight: '500',
							fontSize:'32rpx'
						}" :activeStyle="{
							color: '#131313',
							fontWeight: '500',
							fontSize:'32rpx'
						}">
					</u-tabs>
				</view>
			</uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="content">
			<view class="block" v-if="type == 1 && circle_id">
				<apply ref="apply" :circle_id="circle_id"></apply>
			</view>
			<view class="block" v-if="type == 2 && circle_id">
				<artice ref="artice" :circle_id="circle_id"></artice>
			</view>
			<view class="block" v-if="type == 3 && circle_id">
				<active ref="active" :circle_id="circle_id"></active>
			</view>
			<view class="block" v-if="type == 4 && circle_id">
				<card ref="card" :circle_id="circle_id"></card>
			</view>
			<view class="block" v-if="type == 5 && circle_id">
				<store ref="store" :circle_id="circle_id"></store>
			</view>
			<view class="block" v-if="type == 6 && circle_id">
				<guild ref="guild" :circle_id="circle_id"></guild>
			</view>
		</view>
	</view>
</template>

<script>
	import apply from './components/apply.vue';
	import artice from './components/artice.vue';
	import active from './components/active.vue';
	import card from './components/card.vue';
	import store from './components/store.vue';
	import guild from './components/guild.vue';

	export default {
		components: {
			apply,
			artice,
			active,
			card,
			store,
			guild
		},
		data() {
			return {
				type: 2,
				list: [
					// {
					// 	name: '入圈',
					// 	type: 1,
					// }, 
					{
						name: '动态',
						type: 2,
					},
					{
						name: '活动',
						type: 3,
					},
					{
						name: '名片',
						type: 4,
					},
					{
						name: '商家',
						type: 5,
					},
					
					{
						name: '公会',
						type: 6,
					},
				],

				circle_id: 0,
			}
		},
		methods: {

			onTab(e) {
				this.type = e.type;
			},

			refData() {
				if (!this.$refs.apply && !this.$refs.artice && !this.$refs.active && !this.$refs.card) {
					return;
				}
				if (this.type == 1) {
					this.$refs.apply.refList();
				}
				if (this.type == 2) {
					this.$refs.artice.refList();
				}
				if (this.type == 3) {
					this.$refs.active.refList();
				}
				if (this.type == 4) {
					this.$refs.card.refList();
				}
				if (this.type == 5) {
					this.$refs.store.refList();
				}
				if (this.type == 6) {
					this.$refs.guild.refList();
				}
			},

		},

		onLoad(option) {

			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}

			this.circle_id = Number(`${option.circle_id}`);
		},

		onReachBottom() {
			if (this.type == 1) {
				this.$refs.apply.onReach();
			}

			if (this.type == 2) {
				this.$refs.artice.onReach();
			}

			if (this.type == 3) {
				this.$refs.active.onReach();
			}
			
			if (this.type == 4) {
				this.$refs.card.onReach();
			}
			
			if (this.type == 5) {
				this.$refs.store.onReach();
			}
			
			if (this.type == 6) {
				this.$refs.guild.onReach();
			}
		},



		onShow() {
			this.refData();
		},

	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #FFF;
	}

	.nav {
		background-size: 100% !important;
		background: #FFF;

		// /deep/ .uni-navbar__header-btns-right {
		// 	width: 20rpx !important;
		// }

		.nav_tab {
			width: 100%;
		}
	}
</style>